<template>
  <div class="container">
    <span>填写并核对订单信息</span>
    <div class="top">
      <div class="person">收件人信息:</div>
      <div class="payMethod">
        <div>支付方式</div>
        <div>
          <a href="javascript:;">在线支付</a>
          <a href="javascript:;">货到付款</a>
        </div>
      </div>
      <div class="goodsMenu">
        <div><h6>送货清单</h6></div>
        <div class="main" v-for="(item, index) in goods" :key="index">
          <div>
            <span>配送方式</span>
            <div>
              <a href="javascript:;">天天快递</a>
              <p>
                <span>标准达：</span>
                配送时间：预计8月10日（周三）09:00-15:00送达
              </p>
              <p><span>总重量：</span> 0.450kg</p>
            </div>
          </div>
          <div>
            <span>商品清单</span>
            <div class="mainn">
              <div class="left">
                <a href="javascript:;">
                  <img :src="item.goodsImg" alt="" />
                  <div>
                    <span>{{ item.goodsTitle }}</span>
                    <div>
                      <span>{{ item.color }}</span>
                      <span>{{ item.version }}</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="right">
                <span>￥{{ item.price }}</span>
                <span>*{{ item.num }}</span>
                <span>有货</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bill">
        <div><span>发票信息</span></div>
        <div>
          <span>普通发票</span>
          <span>个人</span>
          <span>明细</span>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="context">
        <a href="javascript:;"
          ><span>总商品金额：</span><span>￥{{TitlePrice}}.00</span></a
        >
        <a href="javascript:;"><span>调货服务费：</span><span>￥0.00</span></a>
        <a href="javascript:;"><span>运费：</span><span>￥0.00</span></a>
        <a href="javascript:;"><span>返现：</span><span>￥0.00</span></a>
      </div>
    </div>
    <div class="bottom">
      <div class="shang">
        <div>
          <a href="javascript:;"><span>应付金额</span><span class="price">￥{{TitlePrice}}.00</span></a>
        </div>
      </div>
      <div class="xia">
        <el-button type="danger" size="default" @click='endShopping'>结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'pay',
  data () {
    return {
      goods: [],
      TitlePrice: 0
    }
  },
  computed: {
    ...mapState('shoppingCarAbout', ['ShoppingCar'])
  },
  beforeMount () {
    this.$store.dispatch('shoppingCarAbout/getShopCar')
  },
  watch: {
    goods: {
      deep: true,
      handler (newval, oldval) {
        var countPrice = 0
        newval.forEach((ele) => {
          countPrice += parseFloat(ele.TitlePrice)
        })
        this.TitlePrice = countPrice
      }
    }

  },
  mounted () {
    setTimeout(() => {
      this.ShoppingCar.data.forEach(element => {
        if (element.isSelect === true) {
          this.goods.push(element)
        }
      })
    }, 300)
  },
  methods: {
    endShopping () {
      this.$router.push({
        name: 'endshopping'
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  margin: 0 auto;
  & > span {
    font-weight: bold;
    font-size: 14px;
    color: rgb(58, 58, 58);
  }
  .top {
    box-sizing: border-box;
    padding: 20px 20px 20px;
  border: 1px solid #ccc;
    .person,
    .payMethod,
    .goodsMenu,
    .bill {
      border-bottom: 1px solid #ccc;
      line-height: 40px;
      color: rgb(27, 27, 27);
      font-weight: bold;
      font-size: 13px;
    }
    .payMethod {
      & > div:nth-child(2) {
        padding-left: 24px;
      }
      & > div:nth-child(2) {
        a {
          display: inline-block;
          height: 30px;
          border: 1px solid #ccc;
          line-height: 30px;
          padding: 0 25px;
          font-weight: normal;
          &:nth-child(1) {
            border: 2px solid #e43939;
          }
        }
      }
    }
    .goodsMenu {
      & > div {
        h6 {
          margin: 0;
          padding: 0;
          color: #1b1b1b;
          font-weight: bold;
          font-size: 13px;
        }
      }
      .main {
        .mainn {
          display: flex;
        }
        overflow: hidden;
        margin-top: 10px;
        & > div {
          float: left;
          padding-left: 10px;
        }
        & > div:nth-child(1) {
          background-color: #f7f7f7;
          height: 200px;
          width: 355px;
          a {
            display: inline-block;
            height: 30px;
            border: 2px solid #e43939;
            line-height: 30px;
            padding: 0 25px;
            font-weight: normal;
          }
          p {
            span {
              font-weight: bold;
            }
            font-weight: normal;
          }
        }
        & > div:nth-child(2) {
          background-color: #f3fbfe;
          width: 800px;
          height: 200px;
          .left {
            a {
              display: flex;
              width: 400px;
              line-height: 20px;
              img {
                height: 110px;
                width: 95px;
              }
              div {
                display: flex;
                flex-direction: column;
                span {
                  margin: 10px;
                  color: #666;
                  font-weight: normal;
                }
                div {
                  display: flex;
                  flex-direction: row;
                  span {
                    color: rgb(247, 60, 60);
                    font-weight: bold;
                    margin-left: 30px;
                  }
                }
              }
            }
          }
          .right {
            display: flex;
            justify-content: space-around;
            width: 380px;
            span {
              color: #666;
              font-weight: normal;
            }
            & span:nth-child(1) {
              color: rgb(248, 61, 61);
              font-weight: bold;
            }
          }
        }
      }
    }
    .bill {
      & > div:nth-child(1) {
        span {
          line-height: 40px;
          color: #1b1b1b;
          font-weight: bold;
          font-size: 13px;
        }
      }
      & > div:nth-child(2) {
        font-weight: normal;
        span {
          margin-left: 20px;
        }
      }
    }
  }
  .middle {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    .context {
      margin: 20px;
      float: right;
      display: flex;
      flex-direction: column;
      font-size: 13px;

      a {
        display: flex;
        justify-content: space-between;
        width: 220px;
        margin-top: 10px;
      }
    }
  }
  .bottom {
    .shang {
      height: 60px;
      background-color: rgb(230, 229, 229);
      div {
        float: right;
        a {
          margin: 20px;

          display: flex;
          justify-content: space-between;
          width: 220px;
          margin-top: 10px;
          font-size: 16px;
          font-weight: bold;
          color: rgb(66, 65, 65);
          .price{
            color: rgb(243, 54, 54);
          }
        }
      }
    }
    .xia{
      display: flex;
      justify-content: flex-end;
      margin: 5px;
      .el-button{
        width: 100px;
      }
    }
  }
}
</style>
